Creating the Calculator

We have introduced the basics of FreeForm. It really is easy to use, although a bit tedious if you are dealing with a lot of controls. It does however save many hours of frustration when laying out a complex form such as the calculator we are about to create.

We have at our disposal the initial form that was opened up for our convenience when FreeForm was started up. We will use it for our calculator.

The first thing we will do is verify the form properties. Click the form and open the properties dialog window (Control -> Properties from the menu).

The default type is Window with the name #main. That will be great. Give the form a caption you like. I called mine "LB Calc". Save the changes.

We can begin placing buttons and the single textbox onto the form now. The textbox will be used to display the input and output for the calculator. Let's begin by placing it on the form. Click the textbox control button on the toolbar:

Place near the top of the form and then drag it out to cover much of the upper form. Open the properties for the textbox and give it a simple name (that is the .ext part of the properties). It will be easier to work with in our code later if we give it a simple name. I chose "tbx".

The other change to make is to select a larger, bolder font for the textbox control. Click the FONT button and select a bolder font. I chose Arial_Black 14. Choose what ever you fancy. Remember that many people who might run your program in the future might not have the same font as you. Select a common font.

Control Buttons

Now begin placing the required control buttons on the form. The finished form will look something like the image below:

Remember to make room for the extra height of the textbox. The graphic on the screen will not indicate its true height since you changed the font. Click the textbox control and note the actual height of the control. Place your top row of buttons, leaving room for the textbox.

Each time you place a button you will be prompted for the button's caption. After each button is placed where you want it, and sized appropriately, it is a good idea to alter the underlying properties that go with the button.

I usually simplify the branch label used for the event handler. I used the naming convention of button name + "button" + "click". For the "9" button this looked like: "9buttonClick". You can use what ever you like; bearing in mind it might not exactly match the code I present later.

Change the control name (the .ext field) so that it matches the buttons function. Check the caption to insure it is correct.

Continue to add command buttons until you have created the calculator as shown above.

Creating Code

Once you have the calculator form the way you want it you are ready to create the Liberty Basic source code that will make your form in real life. There are three buttons on the toolbar that do this. The best is the "Produce Code and Outline" button. It not only creates the source code for the form, but builds an outline for each of the labels that are associated with your various controls. The button looks like this:

This will open up a dialog window where all the code required to create a skeleton program for your form will be displayed. It is also copied to the clipboard and can be pasted into the Liberty Basic IDE and saved as a BAS file.

You can also save your form that you created with FreeForm from the Files menu. I have included the form file I created with the project archive. It is called calc.ffa. It can be opened in FreeForm (also from the Files menu).

Below is the basic skeleton of code which my calc.ffa created. In the next section we will be adding the additional code required to change the program from a simple form to an operational program.

go to the next section: Developing the Calculator

---

'Form created with the help of Freeform 3 v03-27-03
'Generated on Aug 29, 2004 at 16:58:58


[setup.main.Window]

    '-----Begin code for #main

    nomainwin
    WindowWidth = 415
    WindowHeight = 325
    UpperLeftX=int((DisplayWidth-WindowWidth)/2)
    UpperLeftY=int((DisplayHeight-WindowHeight)/2)


    '-----Begin GUI objects code

    TextboxColor$ = "white"
    textbox #main.tbx,  20,   7, 365,  35
    button #main.btn9,"9",[9buttonClick], UL, 170,  87,  65,  40
    button #main.btn8,"8",[8buttonClick], UL,  95,  87,  65,  40
    button #main.btn7,"7",[7buttonClick], UL,  20,  87,  65,  40
    button #main.btn6,"6",[6buttonClick], UL, 170, 137,  65,  40
    button #main.btn5,"5",[5buttonClick], UL,  95, 137,  65,  40
    button #main.btn4,"4",[4buttonClick], UL,  20, 137,  65,  40
    button #main.btn3,"3",[3buttonClick], UL, 170, 187,  65,  40
    button #main.btn2,"2",[2buttonClick], UL,  95, 187,  65,  40
    button #main.btn1,"1",[1buttonClick], UL,  20, 187,  65,  40
    button #main.btn0,"0",[0buttonClick], UL,  20, 237, 140,  40
    button #main.btndec,".",[decbuttonClick], UL, 170, 237,  65,  40
    button #main.btnquit,"Quit",[qutibuttonClick], UL,  20,  52,  65,  25
    button #main.btnc,"C",[cbuttonClick], UL,  95,  52, 140,  25
    button #main.btnplus,"+",[plusbuttonClick], UL, 245,  87,  65,  40
    button #main.btnmin,"-",[minbuttonClick], UL, 245, 137,  65,  40
    button #main.btnx,"x",[xbuttonClick], UL, 245, 187,  65,  40
    button #main.btndiv,"/",[divbuttonClick], UL, 245, 237,  65,  40
    button #main.btneq,"=",[eqbuttonClick], UL, 320,  87,  65, 190
    button #main.btnce,"CE",[cebuttonClick], UL, 245,  52, 140,  25

    '-----End GUI objects code

    open "LB Calculate" for window as #main
    print #main, "font ms_sans_serif 10"
    print #main.tbx, "!font arial_black 14"
    print #main, "trapclose [quit.main]"


[main.inputLoop]   'wait here for input event
    wait



[9buttonClick]   'Perform action for the button named 'btn9'

    'Insert your own code here

    wait


[8buttonClick]   'Perform action for the button named 'btn8'

    'Insert your own code here

    wait


[7buttonClick]   'Perform action for the button named 'btn7'

    'Insert your own code here

    wait


[6buttonClick]   'Perform action for the button named 'btn6'

    'Insert your own code here

    wait


[5buttonClick]   'Perform action for the button named 'btn5'

    'Insert your own code here

    wait


[4buttonClick]   'Perform action for the button named 'btn4'

    'Insert your own code here

    wait


[3buttonClick]   'Perform action for the button named 'btn3'

    'Insert your own code here

    wait


[2buttonClick]   'Perform action for the button named 'btn2'

    'Insert your own code here

    wait


[1buttonClick]   'Perform action for the button named 'btn1'

    'Insert your own code here

    wait


[0buttonClick]   'Perform action for the button named 'btn0'

    'Insert your own code here

    wait


[decbuttonClick]   'Perform action for the button named 'btndec'

    'Insert your own code here

    wait


[qutibuttonClick]   'Perform action for the button named 'btnquit'

    'Insert your own code here

    wait


[cbuttonClick]   'Perform action for the button named 'btnc'

    'Insert your own code here

    wait


[plusbuttonClick]   'Perform action for the button named 'btnplus'

    'Insert your own code here

    wait


[minbuttonClick]   'Perform action for the button named 'btnmin'

    'Insert your own code here

    wait


[xbuttonClick]   'Perform action for the button named 'btnx'

    'Insert your own code here

    wait


[divbuttonClick]   'Perform action for the button named 'btndiv'

    'Insert your own code here

    wait


[eqbuttonClick]   'Perform action for the button named 'btneq'

    'Insert your own code here

    wait


[cebuttonClick]   'Perform action for the button named 'btnce'

    'Insert your own code here

    wait

[quit.main] 'End the program
    close #main
    end

---